<template>
    <!-- 心理数据统计页面 -->
    <div class="app-container">
        <searchForm :formOptions="formOptions" @onSearch="onSearch" @onReset="onReset" :formLabelWidth="formLabelWidth"
            v-show="showSearch" />
        <div class="text-title">
            <div class="text-info" v-for="item in educationList" :key="item">
                <p>{{ item.education }}</p>
                <div class="count" style="width: 100%;">
                    <p>参与勤工助学:{{ item.number }}人</p>
                    <p>总工时:{{ item.sumHours }}小时</p>
                    <p>总薪酬:{{ item.sumComp }}元</p>
                </div>
            </div>
        </div>
        <div class="chartBox">
            <div class="chartBox-title">
                各部门勤工俭学人数统计
            </div>
            <div class="chartBox-content" id="mychart"></div>
            <div class="chartBox-title">
                各个月份勤工俭学人数统计
            </div>
            <div class="chartBox-content" id="month"></div>

        </div>
        <div>
            各部门勤工俭学统计
            <div class="count">
                <div class='deptCount'>
                    <p style="text-align: center;">本科</p>
                    <div>
                        <div class="top">
                            <div class='topLeft' v-for="(item, index) in rankingData.本科" :key="index">  
                                <p>排名：{{ index + 1 }}</p>
                                <p>{{ item.deptName }}</p>
                                <p>{{ item.number }}人</p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class='deptCount'>
                    <p style="text-align: center;">专科(高职)</p>
                    <div>
                        <div class="top">
                            <div class='topLeft' v-for="(item, index) in rankingData.高职" :key="index">
                                <p>排名：{{ index + 1 }}</p>
                                <p>{{ item.deptName }}</p>
                                <p>{{ item.number }}人</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class='deptCount'>
                    <p style="text-align: center;">专科</p>
                    <div>
                        <div class="top">
                            <div class='topLeft' v-for="(item, index) in rankingData.专科" :key="index">
                                <p>排名：{{ index + 1 }}</p>
                                <p>{{ item.deptName }}</p>
                                <p>{{ item.number }}人</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class='deptCount'>
                    <p style="text-align: center;">专升本</p>
                    <div>
                        <div class="top">
                            <div class='topLeft' v-for="(item, index) in rankingData.专升本" :key="index">
                                <p>排名：{{ index + 1 }}</p>
                                <p>{{ item.deptName }}</p>
                                <p>{{ item.number }}人</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
  
<script>

import * as echarts from 'echarts'
import searchForm from "@/components/Search/searchForm.vue";
import { statsInfo, statsConsVolNofP, statsConsCentVol } from '@/api/psychological/statisticalData'
import { eachEducation, eachDept, eachMonth, eachRanking } from '@/api/worStudy/digitalSigns'
export default {
    components: { searchForm, },

    data() {
        return {
            educationList: [],
            showSearch: true,
            formLabelWidth: "75px",
            myChartStyle: { width: "100%", height: "400px" }, //图表样式

            formOptions: [
                {
                    label: "年份",
                    prop: "years",
                    type: "year",
                    element: "el-date-picker",
                    placeholder: "请选择年份",
                    valueFormat: "yyyy",
                    initValue: new Date().getFullYear() + ''
                },
            ],
            statsObjcek: {},
            chartTitle: '',
            rankingData: {},

            queryParams: {
                years: new Date().getFullYear() + ''
            },
        };
    },
    created() {
    },
    mounted() {
        console.log(this.queryParams)
        this.getList();
    },
    methods: {
        // 获取搜索表单提交的数据
        onSearch(val) {
            // 查询条件和分页数据合并
            this.queryParams = Object.assign(this.queryParams, val);

            this.getList();
        },
        // 重置
        onReset(data) {

            this.queryParams = Object.assign(this.queryParams, data);
            this.getList();
        },
        /** 查询角色列表 */
        async getList() {
            await eachRanking({ year: this.queryParams.years }).then(res => {
                console.log(res.data.专科, '// 各学历勤工俭学人数排行榜')
                this.rankingData = res.data
            })
            eachEducation({ year: this.queryParams.years }).then(res => {

                this.educationList = res.data

            })
            eachDept({ year: this.queryParams.years }).then((res) => {

                const { data, code } = res

                if (code == 200) {
                    this.initEcharts(data)
                }
            })
            eachMonth({ year: this.queryParams.years }).then((res) => {

                const { data, code } = res
                console.log(data, '各部门月份人数统计')
                if (code == 200) {
                    this.lineEcharts(data)
                }
            })
        },

        initEcharts(props) {
            // 基本柱状图
            var dataZoomEnd = props.xData.length > 10 ? 30 : 100
            const option = {

                // 显示图例
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    show: true,
                },
                xAxis: {
                    data: props.xData,
                    axisLabel: {
                        interval: 0,
                        rotate: 10
                    },
                    axisLine: {
                      
                    },
                },
                dataZoom: [
                    {
                        id: 'dataZoomX',
                        type: 'slider',
                        show: dataZoomEnd ? true : false,
                        start: 0,
                        end: dataZoomEnd
                    }
                ],
                yAxis: {},
                series: [
                    {
                        name: props.chartData[0].yLabel,
                        type: "bar", //形状为柱状图
                        barWidth: '20%',
                        data: props.chartData[0].yData,
                        itemStyle: {
                            color: '#5087ec'
                        }
                    },
                    {
                        name: props.chartData[1].yLabel,
                        type: "bar", //形状为柱状图
                        barWidth: '20%',
                        data: props.chartData[1].yData,
                        itemStyle: {
                            color: '#68bbc4'
                        }
                    },
                    {
                        name: props.chartData[2].yLabel,
                        type: "bar", //形状为柱状图
                        barWidth: '20%',
                        data: props.chartData[2].yData,
                        itemStyle: {
                            color: '#46e379'
                        }
                    },
                    {
                        name: props.chartData[3].yLabel,
                        type: "bar", //形状为柱状图
                        barWidth: '20%',
                        data: props.chartData[3].yData,
                        itemStyle: {
                            color: '#fcc422'
                        }
                    },
                ]
            };
            const myChart = echarts.init(document.getElementById("mychart"));
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        },
        // 柱状图和折线图
        lineEcharts(props) {
            // 基本柱状图
            const option = {

                // 显示图例
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    show: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: props.xData,
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '人数',
                    },
                    {
                        type: 'value',
                        name: '总人数',
                    }
                ],

                series: [
                    {
                        name: props.chartData[0].yLabel,
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value;
                            }
                        },
                        data: props.chartData[0].yData,
                        itemStyle: {
                            color: '#5087ec'
                        }
                    },
                    {
                        name: props.chartData[1].yLabel,
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value;
                            }
                        },
                        data: props.chartData[1].yData,
                        itemStyle: {
                            color: '#68bbc4'
                        }
                    },
                    {
                        name: props.chartData[2].yLabel,
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value;
                            }
                        },
                        data: props.chartData[2].yData,
                        itemStyle: {
                            color: '#46e379'
                        }
                    },
                    {
                        name: props.chartData[3].yLabel,
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value;
                            }
                        },
                        data: props.chartData[3].yData,
                        itemStyle: {
                            color: '#fcc422'
                        }
                    },
                    {
                        name: props.chartData[4].yLabel,
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value;
                            }
                        },
                        data: props.chartData[4].yData,
                        itemStyle: {
                            color: '#58a55c'
                        }
                    },
                ]
            };
            const myChart = echarts.init(document.getElementById("month"));
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        },
    },
};
</script>
  
<style lang="scss" scoped>
.initEcharts {
    height: 500px;
    width: 300px;
}

#barChart {
    width: 100%;
    height: 300px;
}

.chartBox {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

    &+.chartBox {
        margin-top: 15px;
    }

    &-title {
        height: 25px;
        line-height: 25px;
        padding: 0 20px;
        border-bottom: 1px solid #EBEEF5;
    }

    &-content {
        height: 300px;
    }
}

.text-title {
    display: flex;
    justify-content: space-between;
    padding-right: 5px;
    width: 100%;

}

.text-info {
    max-height: 80px;
    overflow-y: auto;
    color: #000;
}

.text-title div {
    width: 24.5%;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #EBEEF5;
    text-align: center;
}

.count {
    display: flex;
    justify-content: space-between;
}

.deptCount {

    width: 24%;
    border: 1px solid #e2e2e2;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 15px;
}

.topLeft {
    display: flex;
    justify-content: space-between;
}
</style>